<template>
  <div>
    <el-form ref="rulesForm" label-position="top" label-width="130px" :model="form" :rules="rules">
      <p class="hint_">基础信息</p>
      <div class="flex_">
        <el-form-item label="类型编号：" prop="TYPE_ID">
          <el-input v-model="form.TYPE_ID" :disabled="!childData" />
        </el-form-item>
        <el-form-item label="类型名称：" prop="TYPE_NAME">
          <el-input v-model="form.TYPE_NAME" />
        </el-form-item>
        <el-form-item label="场地配置类型：">
          <el-select v-model="form.SITE_CONFIG_TYPE" clearable placeholder="请选择">
            <el-option v-for="item in budgetUnit.configType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="上级类型：">
          <el-cascader
            v-if="!parentForbidden"
            ref="cascader"
            v-model="form.PARAENT_TYPE_ID"
            clearable
            :options="typeOptions"
            :props="{ checkStrictly: true }"
            @change="cascaderChange"
            @visible-change="visibleChange"
          />
          <el-input v-else v-model="topType" disabled />
        </el-form-item>
        <el-form-item label="待定：">
          <el-input v-model="form.UDF1" />
        </el-form-item>
        <el-form-item label="待定：">
          <el-input v-model="form.UDF2" />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="待定：">
          <el-input v-model="form.UDF3" />
        </el-form-item>
      </div>
      <el-form-item label="备注：">
        <el-input v-model="form.NOTES" maxlength="500" placeholder="请输入内容" :rows="7" show-word-limit type="textarea" />
      </el-form-item>
      <p class="hint_">其他类型</p>
      <div class="flex_">
        <el-form-item label="创建人员：">
          <el-input v-model="form.ADDWHO" disabled />
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-input v-model="form.ADDTIME" disabled />
        </el-form-item>
        <el-form-item label="编辑人员：">
          <el-input v-model="form.EDITWHO" disabled />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="编辑时间：">
          <el-input v-model="form.EDITTIME" disabled />
        </el-form-item>
      </div>
      <div class="footer_">
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import budgetUnit from '../common/options'
  import requestMethod from '../common/requestMethod'
  import publicFn from '../common/requestCommon'
  export default {
    name: 'TypeDialog',
    props: {
      typeObj: {
        type: Object,
        default: () => {},
      },
      childData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['success'],
    data() {
      return {
        form: {
          TYPE_ID: '',
          TYPE_NAME: '',
          SITE_CONFIG_TYPE: '',
          PARAENT_TYPE_ID: '',
          UDF1: '',
          UDF2: '',
          UDF3: '',
          UDF4: '',
          UDF5: '',
          UDF6: '',
          NOTES: '',
          TYPE_FULL_ID: '',
        },
        tablePage: {
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 9999,
        },
        topType: '顶层类型',
        budgetUnit,
        rules: {
          TYPE_ID: [{ required: true, message: '请输入类型编号', trigger: 'blur' }],
          TYPE_NAME: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
          BRAND_ID: [{ required: true, message: '请选择品牌', trigger: 'change' }],
        },
        srcArr: [],
        typeOptions: [],
        parentForbidden: false,
      }
    },
    created() {
      if (this.typeObj && JSON.stringify(this.typeObj) != '{}') {
        this.lookForm()
      } else {
        if (this.childData && JSON.stringify(this.childData) != '{}') {
          this.form.PARAENT_TYPE_ID = this.childData.value
          this.form.PARAENT_TYPE_FULL_ID = this.childData.TYPE_FULL_ID
        } else {
          this.form.PARAENT_TYPE_ID = '0'
          this.form.PARAENT_TYPE_FULL_ID = '0'
        }
      }
      this.getTypeList()
    },
    methods: {
      getTreeList(val) {
        //对 treeList 进行递归操作，禁止选中t和v
        val &&
          val.forEach((item) => {
            if (item.value == this.form.TYPE_ID) {
              item.disabled = true // 如果类型为t或者v，就增加禁用选项
            }
            if (item.children) {
              this.getTreeList(item.children)
            }
          })
        return val
      },
      async getTypeList() {
        let res = await publicFn(requestMethod.TYPE_LIST, { '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        if (res.code === '00000') {
          this.srcArr = res.data[requestMethod.TYPE_LIST].data
          res.data[requestMethod.TYPE_LIST].data.forEach((item) => {
            if (item.PARAENT_TYPE_ID == 0) {
              this.typeOptions.push({
                parentId: item.PARAENT_TYPE_ID,
                value: item.TYPE_ID,
                label: item.TYPE_NAME,
                TYPE_FULL_ID: item.TYPE_FULL_ID,
                children: [],
              })
            }
          })
          this.typeOptions.forEach((it) => {
            it.children = this.getChildren(it.value, this.srcArr)
          })
          if (JSON.stringify(this.childData) == '{}') {
            this.typeOptions.unshift({ parentId: '0', value: '0', label: '顶层类型' })
          }
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      // 处理级联--递归
      getChildren(tId, srcArr) {
        let children = []
        srcArr.forEach((item) => {
          if (item.PARAENT_TYPE_ID == tId) {
            children.push({
              parentId: item.PARAENT_TYPE_ID,
              value: item.TYPE_ID,
              label: item.TYPE_NAME,
              TYPE_FULL_ID: item.TYPE_FULL_ID,
              children: [],
            })
          }
        })
        if (children.length == 0) {
          return null
        }
        children.forEach((item) => {
          item.children = this.getChildren(item.value, this.srcArr)
        })
        return children
      },
      visibleChange(tag) {
        if (JSON.stringify(this.childData) == '{}') {
          if (tag) {
            this.typeOptions.splice(0, 1)
          } else {
            this.typeOptions.unshift({ parentId: '0', value: '0', label: '顶层类型' })
          }
        }
      },
      cascaderChange() {
        this.form.PARAENT_TYPE_FULL_ID = this.$refs['cascader'].getCheckedNodes()[0].data.TYPE_FULL_ID
      },
      reset() {
        this.form = {
          TYPE_ID: '',
          TYPE_NAME: '',
          SITE_CONFIG_TYPE: '',
          PARAENT_TYPE_ID: '',
          UDF1: '',
          UDF2: '',
          UDF3: '',
          UDF4: '',
          UDF5: '',
          UDF6: '',
        }
      },
      //编辑回显
      async lookForm() {
        let res = await publicFn(requestMethod.TYPE_LIST_ONE, { BRAND_ID: this.typeObj.BRAND_ID, TYPE_ID: this.typeObj.TYPE_ID, ...this.tablePage })
        console.log(res.data[requestMethod.TYPE_LIST_ONE].data[0])
        if (res.code === '00000') {
          if (res.data[requestMethod.TYPE_LIST_ONE].data.length > 0) {
            this.form = res.data[requestMethod.TYPE_LIST_ONE].data[0]
            if (this.form.PARAENT_TYPE_ID == '0') {
              this.form.PARAENT_TYPE_ID = [this.form.TYPE_FULL_ID]
              this.parentForbidden = true
            } else {
              this.parentForbidden = false
              this.form.PARAENT_TYPE_ID = this.form.TYPE_FULL_ID.split(',').splice(1)
            }
            if (this.typeObj && JSON.stringify(this.typeObj) != '{}') {
              this.typeOptions = this.getTreeList(this.typeOptions)
            }
          }
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      //提交表单
      async submitForm() {
        this.$refs['rulesForm'].validate((valid) => {
          if (valid) {
            this.saveOrEditor()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //新增/编辑
      async saveOrEditor() {
        let method = null
        let hint = ''
        if (this.typeObj && this.typeObj.TYPE_ID) {
          method = requestMethod.TYPE_UPDATE
          hint = '编辑成功'
        } else {
          method = requestMethod.TYPE_ADD
          hint = '新增成功'
        }
        if (this.form.PARAENT_TYPE_ID === '0') {
          this.form.TYPE_FULL_ID = this.form.PARAENT_TYPE_ID
        } else {
          if (typeof this.form.PARAENT_TYPE_ID != 'string') {
            this.form.TYPE_FULL_ID = this.form.PARAENT_TYPE_FULL_ID + ',' + this.form.PARAENT_TYPE_ID[this.form.PARAENT_TYPE_ID.length - 1]
          } else {
            this.form.TYPE_FULL_ID = this.form.PARAENT_TYPE_FULL_ID + ',' + this.form.PARAENT_TYPE_ID
          }
        }
        console.log(this.form)
        if (typeof this.form.PARAENT_TYPE_ID != 'string') {
          this.form.PARAENT_TYPE_ID = this.form.PARAENT_TYPE_ID[this.form.PARAENT_TYPE_ID.length - 1]
        }
        let res = await publicFn(method, { ...this.form })
        if (res.code === '00000') {
          this.$message({
            type: 'success',
            message: hint,
          })
          this.$emit('success')
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>
<style lang="scss">
  @import '../static/scss/Dialog.scss';
</style>
